﻿@{
    ViewBag.Title = "_SliderCarrusel";
}

<div id="outerContainer">
			<div id="imageScroller" style="background-image: url('images/Bottom_texture.jpg'); background-repeat: ">
				<div id="viewer" class="js-disabled">
					<a class="wrapper" title="Sancor Seguros"><img class="logo" id="SancorSeguros" src="../../Content/logos/sancor-seguros.jpg" alt="Sancor Seguros"></a>
					<a class="wrapper" title="San Cristobal"><img class="logo" id="SanCristobal" src="../../Content/logos/san-cristobal1.jpg" alt="San Cristobal"></a>
					<a class="wrapper" title="Nacion Seguros"><img class="logo" id="NacionSeguros" src="../../Content/logos/logonacionseguros.jpg" alt="Nacion Seguros"></a>
					<a class="wrapper" title="Federacion Patronal"><img class="logo" id="FederacionPatronal" src="../../Content/logos/federacion-patronal-seguros.jpg" alt="Federacion Patronal"></a>
					<a class="wrapper" title="Assist Card"><img class="logo" id="AssistCard" src="../../Content/logos/AssistCard.JPG" alt="Assist Card"></a>
                    <a class="wrapper" title="Travel Ace"><img class="logo" id="TravelAce" src="../../Content/logos/TravelAceLogo-15267_200x200.jpg" alt="Travel Ace"></a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		    $(function () {

		        //remove js-disabled class
		        $("#viewer").removeClass("js-disabled");

		        //create new container for images
		        $("<div>").attr("id", "container").css({ position: "absolute" }).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

		        //add images to container
		        $(".wrapper").each(function () {
		            $(this).appendTo("div#container");
		        });

		        //work out duration of anim based on number of images (1 second for each image)
		        var duration = $(".wrapper").length * 1000;

		        //store speed for later (distance / time)
		        var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;

		        //set direction
		        var direction = "rtl";

		        //set initial position and class based on direction
		        (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr");

		        //animator function
		        var animator = function (el, time, dir) {

		            //which direction to scroll
		            if (dir == "rtl") {

		                //add direction class
		                el.removeClass("ltr").addClass("rtl");

		                //animate the el
		                el.animate({ left: "-" + el.width() + "px" }, time, "linear", function () {

		                    //reset container position
		                    $(this).css({ left: $("div#imageScroller").width(), right: "" });

		                    //restart animation
		                    animator($(this), duration, "rtl");

		                    //hide controls if visible
		                    ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null;

		                });
		            } else {

		                //add direction class
		                el.removeClass("rtl").addClass("ltr");

		                //animate the el
		                el.animate({ left: $("div#viewer").width() + "px" }, time, "linear", function () {

		                    //reset container position
		                    $(this).css({ left: 0 - $("div#container").width() });

		                    //restart animation
		                    animator($(this), duration, "ltr");

		                    //hide controls if visible
		                    ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null;
		                });
		            }
		        }

		        //start anim
		        animator($("div#container"), duration, direction);

		        //pause on mouseover
		        $("a.wrapper").live("mouseover", function () {

		            //stop anim
		            $("div#container").stop(true);

		            //show controls
		            ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity: 0.7 }).slideDown("slow") : null;
		            ($("a#rtl").length == 0) ? $("<a>").attr({ id: "rtl", href: "#", title: "rtl" }).appendTo("#controls") : null;
		            ($("a#ltr").length == 0) ? $("<a>").attr({ id: "ltr", href: "#", title: "ltr" }).appendTo("#controls") : null;

		            //variable to hold trigger element
		            var title = $(this).attr("title");

		            //add p if doesn't exist, update it if it does
		            ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title);
		        });

		        //restart on mouseout
		        $("a.wrapper").live("mouseout", function (e) {

		            //hide controls if not hovering on them
		            (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null;

		            //work out total travel distance
		            var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

		            //work out distance left to travel
		            var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

		            //new duration is distance left / speed)
		            var newDuration = distanceLeft / speed;

		            //restart anim
		            animator($("div#container"), newDuration, $("div#container").attr("class"));

		        });

		        //handler for ltr button
		        $("#ltr").live("click", function () {

		            //stop anim
		            $("div#container").stop(true);

		            //swap class names
		            $("div#container").removeClass("rtl").addClass("ltr");

		            //work out total travel distance
		            var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

		            //work out remaining distance
		            var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

		            //new duration is distance left / speed)
		            var newDuration = distanceLeft / speed;

		            //restart anim
		            animator($("div#container"), newDuration, "ltr");
		        });

		        //handler for rtl button
		        $("#rtl").live("click", function () {

		            //stop anim
		            $("div#container").stop(true);

		            //swap class names
		            $("div#container").removeClass("ltr").addClass("rtl");

		            //work out total travel distance
		            var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

		            //work out remaining distance
		            var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

		            //new duration is distance left / speed)
		            var newDuration = distanceLeft / speed;

		            //restart anim
		            animator($("div#container"), newDuration, "rtl");
		        });
		    });
		</script>
